<template>
  <div class="map-array" :style="{ width: targetWidth + 'px' }">
    <div
      class="layers"
      @click="setFloatDiv(item, index)"
      v-for="(item, index) in mapArray"
      :key="index"
      :title="item.text"
    >
      <img :src="item.img" alt="" ref="img" />
      <p>{{ item.text }}</p>
    </div>
  </div>

  <div class="staic" @mouseenter="handleHover()">
    <img :src="mapArray[activeIndex].img" alt="" ref="img" />
    <p>{{ mapArray[activeIndex].text }}</p>
  </div>
</template>

<script>
import * as mapUtils from "../components/mapUtils";
import shiliang from "../assets/shiliang.png";
import yingxiang from "../assets/yingxiang.png";
import dixing from "../assets/dixing.png";
export default {
  data() {
    return {
      mapArray: [
        {
          img: shiliang,
          text: "矢量地图",
          type: "VECTOR",
        },
        {
          img: yingxiang,
          text: "影像地图",
          type: "RASTER",
        },
        {
          img: dixing,
          text: "地形地图",
          type: "TOPOGRAPHY",
        },
      ],
      activeIndex: 0,
      maptype: "VECTOR",
      targetWidth: 0,
    };
  },
  methods: {
    setFloatDiv(id, index) {
      this.maptype = id.type;
      this.activeIndex = index;
      const mark = id.type + "MARK";
      console.log('[ mapUtils ] >', mapUtils.getMap().getLayers().getArray())
      const layers = mapUtils
        .getMap()
        .getLayers()
        .getArray()
        .filter((layer) => layer.getProperties().layerId === "TileLayers");
      layers.forEach((item) => {
        item.setVisible(false);
        if (item.values_.id === id.type || item.values_.id === mark) {
          item.setVisible(true);
          this.targetWidth = 0;
        }
      });
    },
    handleHover() {
      this.targetWidth = 300;
    },
  },
};
</script>

<style lang="scss">
.map-array {
  position: absolute;
  z-index: 1;
  display: flex;
  width: 0px;
  height: 64px;
  bottom: 2%;
  right: 116px;
  overflow: hidden;
  transition: width 0.3s ease; // 添加过渡效果
  .layers {
    width: 100px;
    position: relative;
    cursor: pointer;

    img {
      width: 100px;
      height: 100%;
      object-fit: cover; // 确保图片正确填充
    }
    p {
      position: absolute;
      bottom: 0;
      margin: 0;
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      width: 100%;
      color: #fff;
    }
  }
}
.staic {
  position: absolute;
  z-index: 1;
  bottom: 2%;
  right: 16px;
  height: 64px;
  img {
    width: 100px;
    height: 100%;
    object-fit: cover; // 确保图片正确填充
  }
  p {
    position: absolute;
    bottom: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 100%;
    color: #fff;
  }
}
</style>
